<template>
	<div>
		<el-container>
			<el-aside>
				<Navigation/>
			</el-aside>
			<el-container>
				<el-header>
					<BreadCrumb :navName="navs"/>
				</el-header>
				<el-main>
					<div>
            <div class="searchArea">
              <div class="searchArea1">
                <el-row >
                  <el-col :span="6">
                    <el-input v-model="query.id" placeholder="订单编号"/>
                  </el-col>

                  <el-col :span="3">
                    <el-button type="primary" @click="loadData()">搜索</el-button>
                  </el-col>
                </el-row>
              </div>
              <div>
                <el-row >
                  <el-col :span="6">
                    <el-select v-model="query.orderStatus" clearable placeholder="订单状态">
                      <el-option
                        v-for="order in orderStatusAll"
                        :key="order.id"
                        :value="order.id"
                        :label="order.name">
                      </el-option>
                    </el-select>
                  </el-col>

                  <el-col :span="2">
                    <el-button type="primary" @click="loadData()">确定</el-button>
                  </el-col>
                </el-row>
              </div>
            </div>


						<div>
							<el-table
								:data="orderData"
								style="width: 100%">
								<el-table-column
								prop="id"
								label="订单编号"
                width="300px">
								</el-table-column>
								<el-table-column
								prop="userName"
								label="用户名称"
                width="300px">
								</el-table-column>
								<el-table-column
								prop="orderStatusName"
								label="订单状态">
								</el-table-column>
                <el-table-column
                  prop="handler"
                  label="操作">
                  <template slot-scope="scope">
                    <el-button @click="viewWare(scope.row)" type="text" size="small">查看</el-button>
                  </template>
                </el-table-column>
							</el-table>
						</div>

						<div class="block paginationStyle">
							<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="query.pageNo"
							:page-sizes="[20, 40,100]"
							:page-size="query.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="query.totalSize">
							</el-pagination>
						</div>

					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import Navigation from '../../Navigation'
	import BreadCrumb from '../../BreadCrumb'
	export default{
		name:'OrderRedPackList',
		methods: {
			handleSizeChange(val){
				this.query.pageSize = val;
				this.loadData();
			},
			handleCurrentChange(val){
				this.query.pageNo = val;
				this.loadData();
			},
      //跳转商品详情方法
      viewWare(row){
        this.$router.push('/order/redpack/'+row.id);
      },
      //加载分页信息
      loadData(){
        var that = this;
        this.$api.post('/red/page',that.query,function(data){
          if(data.flag=="success"){
            that.query.totalSize = data.data.total;
            that.orderData = data.data.records;
            for(var i=0;i<that.orderData.length;i++){
              that.orderData[i].orderStatusName = that.getStatusNameById(that.orderData[i].orderStatus);
            }
          }else{
            this.$message.error(data.msg);
          }
        });
      },
      getStatusNameById(id){
        for(var i=0;i<this.orderStatusAll.length;i++){
          if(this.orderStatusAll[i].id==id){
            return this.orderStatusAll[i].name;
          }
        }
        return null;
      }
    },
    mounted(){
      this.loadData();
    },
		data:function(){
			return {
				createTime:[],
				query:{
				  id:"",
					orderStatus:"",
					orderType:3,
					pageNo:1,
					pageSize:40,
					totalSize:0
				},
				navs:["订单管理","红包订单","订单列表"],
				orderStatusAll:this.GLOBAL.orderStatusAll,
				orderData:[]
			}
		},
		components:{
			Navigation,
			BreadCrumb
		}
	}
</script>

<style scoped>

  .searchArea1{
    margin-bottom: 10px;
  }

	.searchArea{
		margin-bottom: 15px;
	}

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-input{
	width: 220px !important;
  }
  .paginationStyle{
	  margin-top: 15px;
	  float:right;
  }
</style>
